<template>
  <div style="width:230px;">
      <div class="wrap" style="width: 100%;
        position: relative;">
        <div class="top" style=" color: #fff;
            display: flex;
            flex-direction: column;">
            <div class="left-bar" style="width: 2px;
                height: 60px;
                background-color: #00704E;
                position: absolute;"></div>
            <div class="title" style="flex: 1;
                font-size: 14px;
                margin-left: 10px;">保障工单</div>
            <div class="data" style="flex: 2;
                display: flex;
                justify-content: space-between;
                font-size: 30px;
                margin-left: 10px;
                margin-top: 2px;">
                <span>8848</span>
                <span style="background-color: #429C82;
                    border-radius: 4px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 24px;
                    margin-left: 28px;
                    padding-right: 10px;">
                    <small style="font-size: 14px;
                        padding-left: 10px;
                        padding-right: 7px;">输电</small> 981</span>
            </div>
        </div>
        <div class="btm" style="display: flex;
            flex-direction: column;
            font-size: 12px;
            color: #00704E;
            margin-top: 2px;">
            <div style="border-bottom: 2px solid rgba(255, 255, 255, 0.301);
                margin-top: 8px;
                padding-bottom: 7px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                position: relative;" v-for="(item,i) in datalist" :key="item.id"><div style="transform:scale(1);transform-origin:center;">{{item.name}}</div>
                <span style="display: inline-block;
                    height: 6px;
                    border-radius: 3px;
                    background-color: #429C82;
                    position: absolute;
                    max-width: 195px;
                    left: 15%;" :style="'width:'+datalist[i].data"></span></div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            datalist: [
                { 
                    name: '输电',
                    data: '200px' //100%
                },
                { 
                    name: '变电',
                    data: '80px' //40%
                },
                { 
                    name: '配电',
                    data: '180px' //90%
                },
                { 
                    name: '电缆',
                    data: '140px' //70%
                },
            ]
        }
    },
}
</script>

<style>
/*
.wrap{
    width: 100%;
    position: relative;
}
.top{
    color: #fff;
    display: flex;
    flex-direction: column;
}
.left-bar{
    width: 2px;
    height: 50%;
    background-color: #00704E;
    position: absolute;
}
.title{
    flex: 1;
    font-size: 14px;
    margin-left: 8px;
}
.data{
    flex: 2;
    display: flex;
    justify-content: flex-start;
    font-size: 30px;
    margin-left: 8px;
    margin-top: 2px;
}
.data > span:nth-child(2){
    background-color: #429C82;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    margin-left: 28px;
    padding-right: 10px;
}
.data small{
    font-size: 14px;
    padding-left: 10px;
    padding-right: 7px;
}

.btm{
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: #00704E;
    margin-top: 2px;
}
.btm > div{
    border-bottom: 2px solid rgba(255, 255, 255, 0.301);
    margin-top: 8px;
    padding-bottom: 7px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}
.btm > div > span{
    display: inline-block;
    height: 6px;
    border-radius: 3px;
    background-color: #429C82;
    position: absolute;
    left: 60%;
}
.btm > div:first-child span{
    width: 30%;
}
.btm > div:last-child span{
    width: 15%;
}
*/
</style>